<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>💝 情侣甜蜜抽奖转盘</title>
    <link rel="stylesheet" href="/lucky_wheel/style.css">
    <style></style>
</head>
<body>
    <!-- 飘落的心形 -->
    <div class="hearts-container"></div>
    
    <!-- 粒子效果容器 -->
    <div class="particles-container"></div>

    <!-- 自定义背景图片容器 -->
    <div class="custom-bg-container" id="customBgContainer"></div>

    <div class="container">
        <header>
            <h1>💝 情侣甜蜜抽奖转盘</h1>
            <p class="subtitle">让爱情充满惊喜与甜蜜 ❤️</p>
        </header>

        <div class="main-content">
            <!-- 左侧统计 -->
            <div class="sidebar">
                <h3>📊 统计数据</h3>
                <div class="stats">
                    <div class="stat-card">
                        <div class="stat-number" id="totalRewards">0</div>
                        <div class="stat-label">奖励项目</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalPunishments">0</div>
                        <div class="stat-label">惩罚项目</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalDraws">0</div>
                        <div class="stat-label">总抽奖次数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="cooldownTime">0</div>
                        <div class="stat-label">冷却时间(秒)</div>
                    </div>
                </div>
                
                <h3 style="margin-top: 20px;">🎮 玩家统计</h3>
                <div class="stats">
                    <div class="stat-card" id="player1Stats">
                        <div class="stat-number">0</div>
                        <div class="stat-label">玩家1 抽奖</div>
                    </div>
                    <div class="stat-card" id="player1Rewards">
                        <div class="stat-number">0</div>
                        <div class="stat-label">玩家1 奖励</div>
                    </div>
                    <div class="stat-card" id="player2Stats">
                        <div class="stat-number">0</div>
                        <div class="stat-label">玩家2 抽奖</div>
                    </div>
                    <div class="stat-card" id="player2Rewards">
                        <div class="stat-number">0</div>
                        <div class="stat-label">玩家2 奖励</div>
                    </div>
                </div>
                
                <button class="btn btn-primary" onclick="openManageModal()">✏️ 管理奖惩</button>
                <button class="btn btn-secondary" onclick="openPlayerSettingsModal()">👥 玩家设置</button>
                <button class="btn btn-secondary" onclick="openSettingsModal()">⚙️ 系统设置</button>
                <button class="btn btn-secondary" onclick="resetData()">🔄 重置数据</button>
            </div>

            <!-- 中间转盘 -->
            <div class="wheel-section">
                <h2 class="wheel-title" style="color: #ff6b9d; margin-bottom: 20px; font-size: clamp(18px, 5vw, 24px);">🎯 点击中心开始抽奖</h2>
                <!-- 修改：添加移动端头像昵称容器 -->
                <div class="current-player-mobile">
                    <div class="current-player" id="currentPlayer">
                        <!-- 玩家显示内容将由JavaScript动态生成 -->
                    </div>
                </div>
                <div class="mode-selector" style="margin: 10px 0;">
                    <label>
                        <input type="radio" name="gameMode" value="normal" checked> 普通模式
                    </label>
                    <label style="margin-left: 15px;">
                        <input type="radio" name="gameMode" value="coop"> 情侣合作模式
                    </label>
                </div>
                <div class="wheel-container">
                    <div class="wheel-inner">
                        <div class="pointer"></div>
                        <canvas id="wheelCanvas"></canvas>
                        <div class="center-button" id="spinButton" onclick="startSpin()">
                            <div class="center-button-main">开始</div>
                            <small>抽奖</small>
                        </div>
                    </div>
                </div>
                <div id="cooldownMessage" style="margin-top: 15px; color: #ff6b9d; display: none;">
                    请等待 <span id="cooldownCounter">10</span> 秒后再抽
                </div>
                <!-- 未完成事项按钮 -->
                <button class="btn btn-primary" onclick="openPendingModal()" style="margin-top: 20px;">📋 未完成事项</button>
                <!-- 兑换抵消卡按钮已移动到此处 -->
                <button class="btn btn-primary" onclick="exchangeOffsetCard()" style="margin-top: 10px;">
                    兑换抵消卡 (5奖励 = 1抵消卡)
                </button>
            </div>

            <!-- 右侧历史 -->
            <div class="sidebar history-sidebar">
                <h3>📜 抽奖历史</h3>
                <div class="item-list" id="historyList">
                    <p style="text-align: center; color: #999; padding: 20px;">暂无记录</p>
                </div>
                <button class="btn btn-secondary" onclick="clearHistory()">🗑️ 清空历史</button>
                <!-- 兑换抵消卡按钮已移动到转盘下方 -->
            </div>
        </div>
    </div>

    <!-- 结果弹窗 -->
    <div class="modal" id="resultModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeResultModal()">&times;</span>
            <div class="modal-header">
                <div class="result-icon" id="resultIcon">🎉</div>
                <div class="result-visual" id="resultVisual" style="font-size: 48px; margin: 15px 0;"></div>
                <div class="result-text" id="resultTitle">恭喜中奖！</div>
                <div class="result-description" id="resultDesc">这是一个美好的奖励~</div>
                <!-- 修改：合作模式结果展示 -->
                <div id="coopResults" style="display: none; margin-top: 20px;">
                    <div class="coop-result" style="display: flex; justify-content: space-around; margin: 15px 0;">
                        <div class="player-result" style="text-align: center;">
                            <div class="player-name" id="player1ResultName" style="font-weight: bold; color: #ff6b9d;"></div>
                            <div class="result-icon" id="player1ResultIcon" style="font-size: 36px; margin: 10px 0;"></div>
                            <div class="result-title" id="player1ResultTitle" style="font-weight: bold;"></div>
                            <div class="result-desc" id="player1ResultDesc" style="font-size: 14px; color: #666;"></div>
                        </div>
                        <div class="player-result" style="text-align: center;">
                            <div class="player-name" id="player2ResultName" style="font-weight: bold; color: #ff6b9d;"></div>
                            <div class="result-icon" id="player2ResultIcon" style="font-size: 36px; margin: 10px 0;"></div>
                            <div class="result-title" id="player2ResultTitle" style="font-weight: bold;"></div>
                            <div class="result-desc" id="player2ResultDesc" style="font-size: 14px; color: #666;"></div>
                        </div>
                    </div>
                    <div class="coop-outcome" id="coopOutcome" style="text-align: center; margin-top: 15px; padding: 15px; background: #fff0f5; border-radius: 10px;">
                        <!-- 合作模式结果说明 -->
                    </div>
                    <!-- 修改：合作模式选择界面 - 调整布局确保移动端对齐 -->
                    <div id="coopSelection" style="display: none; margin-top: 20px;">
                        <h3 style="color: #ff6b9d; text-align: center; margin-bottom: 15px;">请选择完成情况</h3>
                        <div class="player-selection">
                            <div class="selection-item">
                                <div class="player-name" style="font-weight: bold; color: #ff6b9d; margin-bottom: 10px;" id="selectionPlayer1Name"></div>
                                <div class="selection-options">
                                    <div class="checkbox-row">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="player1Complete" class="coop-checkbox" onchange="updateCoopConfirmButton()">
                                            <span class="checkmark"></span>
                                            完成任务
                                        </label>
                                    </div>
                                    <div class="checkbox-row">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="player1Skip" class="coop-checkbox" onchange="updateCoopConfirmButton()">
                                            <span class="checkmark"></span>
                                            跳过任务
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="selection-item">
                                <div class="player-name" style="font-weight: bold; color: #ff6b9d; margin-bottom: 10px;" id="selectionPlayer2Name"></div>
                                <div class="selection-options">
                                    <div class="checkbox-row">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="player2Complete" class="coop-checkbox" onchange="updateCoopConfirmButton()">
                                            <span class="checkmark"></span>
                                            完成任务
                                        </label>
                                    </div>
                                    <div class="checkbox-row">
                                        <label class="checkbox-label">
                                            <input type="checkbox" id="player2Skip" class="coop-checkbox" onchange="updateCoopConfirmButton()">
                                            <span class="checkmark"></span>
                                            跳过任务
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary" id="coopConfirmBtn" style="margin-top: 20px; display: none;" onclick="confirmCoopSelection()">确定</button>
                    </div>
                    <!-- 修改：再来一次情况下的确定按钮 -->
                    <button class="btn btn-primary" id="coopRetryBtn" style="margin-top: 20px; display: none;" onclick="closeResultModal()">确定</button>
                </div>
            </div>
            <button class="btn btn-primary" id="normalCompleteBtn" onclick="completeTask()">✅ 完成任务</button>
            <button class="btn btn-secondary" id="normalSkipBtn" onclick="skipTask()">⏭️ 跳过（记录未完成）</button>
            <button class="btn btn-secondary" id="useOffsetBtn" style="display: none;" onclick="useOffsetCard()">
                使用抵消卡
            </button>
        </div>
    </div>

    <!-- 管理弹窗 -->
    <div class="modal" id="manageModal">
        <div class="modal-content" style="max-width: 900px;">
            <span class="close-btn" onclick="closeManageModal()">&times;</span>
            <div class="manage-section">
                <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 30px; font-size: clamp(20px, 5vw, 28px);">✨ 奖惩项目管理</h2>
                
                <!-- 模板库管理 -->
                <div class="template-section">
                    <h3 style="color: #ff6b9d; font-size: clamp(16px, 4vw, 20px); margin-bottom: 15px;">📚 模板库</h3>
                    <div class="template-controls">
                        <button class="btn btn-primary" onclick="openTemplateModal()">📁 模板库管理</button>
                        <button class="btn btn-secondary" onclick="saveCurrentSettings()">💾 保存设置</button>
                        </select>
                    </div>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
                    <div>
                        <h3 style="color: #ffd700; font-size: clamp(16px, 4vw, 20px);">🎁 奖励列表</h3>
                        <button class="btn btn-primary" onclick="addItem('reward')">+ 添加奖励</button>
                        <div class="item-list" id="rewardList"></div>
                    </div>
                    <div>
                        <h3 style="color: #ff6b9d; font-size: clamp(16px, 4vw, 20px);">😈 惩罚列表</h3>
                        <button class="btn btn-primary" onclick="addItem('punishment')">+ 添加惩罚</button>
                        <div class="item-list" id="punishmentList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑项目弹窗 -->
    <div class="modal" id="editModal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close-btn" onclick="closeEditModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);" id="editTitle">添加项目</h2>
            <input type="text" id="itemTitle" placeholder="标题（例如：唱一首歌）">
            <textarea id="itemDesc" rows="4" placeholder="详细说明（例如：为对方唱一首最喜欢的歌曲）"></textarea>
            <div style="margin: 10px 0;">
                <label style="display: block; margin-bottom: 5px; color: #ff6b9d;">概率权重 (1-10，越高越容易抽到)</label>
                <input type="number" id="itemProbability" min="1" max="10" value="5">
            </div>
            <button class="btn btn-primary" onclick="saveItem()">💾 保存</button>
        </div>
    </div>

    <!-- 系统设置模态框 -->
    <div class="modal" id="settingsModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closeSettingsModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);">⚙️ 系统设置</h2>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">抽奖冷却时间(秒)</label>
                <input type="number" id="cooldownSetting" min="0" max="300" placeholder="设置抽奖间隔时间">
            </div>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">主题设置</label>
                <select id="themeSetting" style="width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #ffd6e7; border-radius: 8px; font-size: clamp(14px, 3vw, 16px);">
                    <option value="default">默认主题</option>
                    <option value="valentine">情人节</option>
                    <option value="christmas">圣诞节</option>
                    <option value="spring">春季</option>
                    <option value="cartoon">卡通风</option>
                    <option value="minimalist">简约风</option>
                    <option value="vintage">复古风</option>
                </select>
            </div>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">自定义背景</label>
                <input type="file" id="customBackground" accept="image/*" class="file-input">
                <button class="btn btn-secondary" onclick="uploadCustomBg()" style="margin-top: 5px;">上传背景图</button>
                <button class="btn btn-secondary" onclick="removeCustomBg()" style="margin-top: 5px;">移除背景图</button>
            </div>
            <!-- 新增：背景音乐设置 -->
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">背景音乐设置</label>
                <button class="btn btn-secondary" onclick="openBgMusicModal()" style="margin-top: 5px; width: 100%;">🎵 背景音乐设置</button>
            </div>
            <!-- 新增：抽奖音乐设置 -->
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">抽奖音乐设置</label>
                <button class="btn btn-secondary" onclick="openSpinMusicModal()" style="margin-top: 5px; width: 100%;">🎵 抽奖音乐设置</button>
            </div>
            <button class="btn btn-primary" onclick="saveSettings()">💾 保存设置</button>
        </div>
    </div>

    <!-- 修改玩家设置模态框，添加头像上传功能 -->
    <div class="modal" id="playerSettingsModal">
        <div class="modal-content">
            <span class="close-btn" onclick="closePlayerSettingsModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);">👥 玩家设置</h2>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">玩家1名称</label>
                <input type="text" id="player1Name" placeholder="输入玩家1名称">
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">玩家1头像</label>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <img id="player1AvatarPreview" src="" alt="玩家1头像预览" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #ff6b9d;">
                    <input type="file" id="player1Avatar" accept="image/*" class="file-input">
                </div>
                
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">玩家2名称</label>
                <input type="text" id="player2Name" placeholder="输入玩家2名称">
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">玩家2头像</label>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <img id="player2AvatarPreview" src="" alt="玩家2头像预览" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #ff6b9d;">
                    <input type="file" id="player2Avatar" accept="image/*" class="file-input">
                </div>
            </div>
            <button class="btn btn-primary" onclick="savePlayerSettings()">💾 保存设置</button>
        </div>
    </div>

    <!-- 模板库管理模态框 -->
    <div class="modal" id="templateModal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close-btn" onclick="closeTemplateModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);">📚 模板库管理</h2>
            
            <div class="template-categories">
                <div class="template-category">
                    <h3 style="color: #ff6b9d; font-size: clamp(16px, 4vw, 18px); margin-bottom: 10px;">甜蜜互动</h3>
                    <div class="template-list" id="sweetInteractionTemplates"></div>
                    <button class="btn btn-secondary" onclick="addTemplate('sweetInteraction')">+ 添加模板</button>
                </div>
                
                <div class="template-category">
                    <h3 style="color: #ffd700; font-size: clamp(16px, 4vw, 18px); margin-bottom: 10px;">生活小确幸</h3>
                    <div class="template-list" id="lifeBlessingTemplates"></div>
                    <button class="btn btn-secondary" onclick="addTemplate('lifeBlessing')">+ 添加模板</button>
                </div>
                
                <div class="template-category">
                    <h3 style="color: #4cd964; font-size: clamp(16px, 4vw, 18px); margin-bottom: 10px;">趣味挑战</h3>
                    <div class="template-list" id="funChallengeTemplates"></div>
                    <button class="btn btn-secondary" onclick="addTemplate('funChallenge')">+ 添加模板</button>
                </div>
                
                <div class="template-category">
                    <h3 style="color: #5ac8fa; font-size: clamp(16px, 4vw, 18px); margin-bottom: 10px;">浪漫瞬间</h3>
                    <div class="template-list" id="romanticMomentTemplates"></div>
                    <button class="btn btn-secondary" onclick="addTemplate('romanticMoment')">+ 添加模板</button>
                </div>
                
                <div class="template-category">
                    <h3 style="color: #ff2d55; font-size: clamp(16px, 4vw, 18px); margin-bottom: 10px;">情趣游戏</h3>
                    <div class="template-list" id="intimateGameTemplates"></div>
                    <button class="btn btn-secondary" onclick="addTemplate('intimateGame')">+ 添加模板</button>
                </div>
                
                <!-- 新增：合作模式分类 -->
                <div class="template-category">
                    <h3 style="color: #5ac8fa; font-size: clamp(16px, 4vw, 18px); margin-bottom: 10px;">🤝 合作模式</h3>
                    <div class="template-list" id="coopModeTemplates"></div>
                    <button class="btn btn-secondary" onclick="addTemplate('coopMode')">+ 添加模板</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 未完成事项模态框 -->
    <div class="modal" id="pendingModal">
        <div class="modal-content" style="max-width: 800px;">
            <span class="close-btn" onclick="closePendingModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);">📋 未完成事项</h2>
            
            <!-- 抵消卡数量显示 -->
            <div class="offset-cards-display" style="display: flex; justify-content: space-between; margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #fff5f7, #ffe4ec); border-radius: 12px;">
                <div class="player-offset">
                    <div class="player-name">玩家1</div>
                    <div class="offset-count" id="player1OffsetCount">0</div>
                    <div class="offset-label">抵消卡</div>
                </div>
                <div class="player-offset">
                    <div class="player-name">玩家2</div>
                    <div class="offset-count" id="player2OffsetCount">0</div>
                    <div class="offset-label">抵消卡</div>
                </div>
            </div>
            
            <!-- 标签页切换 -->
            <div class="tab-container">
                <div class="tab-buttons">
                    <button class="tab-button active" onclick="switchPendingTab('rewards')">🎁 奖励</button>
                    <button class="tab-button" onclick="switchPendingTab('punishments')">😈 惩罚</button>
                </div>
                
                <!-- 奖励未完成事项 -->
                <div class="tab-content active" id="rewardsTab">
                    <div class="player-pending-section">
                        <h3 style="color: #ff6b9d; margin-bottom: 15px;">玩家1 未完成奖励</h3>
                        <div class="pending-list" id="player1RewardsPending"></div>
                    </div>
                    <div class="player-pending-section">
                        <h3 style="color: #ff6b9d; margin-bottom: 15px;">玩家2 未完成奖励</h3>
                        <div class="pending-list" id="player2RewardsPending"></div>
                    </div>
                </div>
                
                <!-- 惩罚未完成事项 -->
                <div class="tab-content" id="punishmentsTab">
                    <div class="player-pending-section">
                        <h3 style="color: #ff6b9d; margin-bottom: 15px;">玩家1 未完成惩罚</h3>
                        <div class="pending-list" id="player1PunishmentsPending"></div>
                    </div>
                    <div class="player-pending-section">
                        <h3 style="color: #ff6b9d; margin-bottom: 15px;">玩家2 未完成惩罚</h3>
                        <div class="pending-list" id="player2PunishmentsPending"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增：背景音乐设置模态框 -->
    <div class="modal" id="bgMusicModal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close-btn" onclick="closeBgMusicModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);">🎵 背景音乐设置</h2>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">上传背景音乐</label>
                <input type="file" id="bgMusicFile" accept="audio/*" class="file-input">
                <button class="btn btn-secondary" onclick="uploadBgMusic()" style="margin-top: 5px;">上传音乐</button>
                <button class="btn btn-secondary" onclick="removeBgMusic()" style="margin-top: 5px;">移除音乐</button>
                <button class="btn btn-secondary" onclick="resetBgMusic()" style="margin-top: 5px;">恢复默认音乐</button>
            </div>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">背景音乐音量</label>
                <input type="range" id="bgMusicVolume" min="0" max="100" value="50" style="width: 100%;">
                <div style="text-align: center; margin-top: 5px;">
                    <span id="bgMusicVolumeValue">50%</span>
                </div>
            </div>
            <div style="margin: 15px 0;">
                <label class="checkbox-label" style="display: flex; align-items: center;">
                    <input type="checkbox" id="bgMusicEnabled">
                    <span class="checkmark" style="margin-right: 10px;"></span>
                    开启背景音乐
                </label>
            </div>
            <button class="btn btn-primary" onclick="saveBgMusicSettings()">💾 保存设置</button>
            <button class="btn btn-secondary" onclick="closeBgMusicModal()" style="margin-top: 10px;">取消</button>
        </div>
    </div>

    <!-- 新增：抽奖音乐设置模态框 -->
    <div class="modal" id="spinMusicModal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close-btn" onclick="closeSpinMusicModal()">&times;</span>
            <h2 style="color: #ff6b9d; text-align: center; margin-bottom: 20px; font-size: clamp(20px, 5vw, 24px);">🎵 抽奖音乐设置</h2>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">上传抽奖音乐</label>
                <input type="file" id="spinMusicFile" accept="audio/*" class="file-input">
                <button class="btn btn-secondary" onclick="uploadSpinMusic()" style="margin-top: 5px;">上传音乐</button>
                <button class="btn btn-secondary" onclick="removeSpinMusic()" style="margin-top: 5px;">移除音乐</button>
                <button class="btn btn-secondary" onclick="resetSpinMusic()" style="margin-top: 5px;">恢复默认音效</button>
            </div>
            <div>
                <label style="display: block; margin: 10px 0 5px; color: #ff6b9d; font-weight: bold;">抽奖音乐音量</label>
                <input type="range" id="spinMusicVolume" min="0" max="100" value="50" style="width: 100%;">
                <div style="text-align: center; margin-top: 5px;">
                    <span id="spinMusicVolumeValue">50%</span>
                </div>
            </div>
            <div style="margin: 15px 0;">
                <label class="checkbox-label" style="display: flex; align-items: center;">
                    <input type="checkbox" id="spinMusicEnabled">
                    <span class="checkmark" style="margin-right: 10px;"></span>
                    开启抽奖音乐
                </label>
            </div>
            <button class="btn btn-primary" onclick="saveSpinMusicSettings()">💾 保存设置</button>
            <button class="btn btn-secondary" onclick="closeSpinMusicModal()" style="margin-top: 10px;">取消</button>
        </div>
    </div>

    <script src="/lucky_wheel/script.js"></script>
</body>
</html>